<template>
  <div class="text-center py-12">
    <!-- 错误图标区域 -->
    <div class="mb-6">
      <div class="w-16 h-16 mx-auto rounded-full bg-destructive/10 flex items-center justify-center">
        <!-- 网络错误图标 -->
        <svg
          v-if="errorType === 'network'"
          class="w-8 h-8 text-destructive"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
        </svg>

        <!-- 服务器错误图标 -->
        <svg
          v-else-if="errorType === 'server'"
          class="w-8 h-8 text-destructive"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
        </svg>

        <!-- 权限错误图标 -->
        <svg
          v-else-if="errorType === 'permission'"
          class="w-8 h-8 text-destructive"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
        </svg>

        <!-- 通用错误图标 -->
        <svg v-else class="w-8 h-8 text-destructive" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
    </div>

    <!-- 错误标题 -->
    <h3 class="text-xl font-semibold text-foreground mb-2">{{ computedTitle }}</h3>

    <!-- 错误详情 -->
    <div class="max-w-sm mx-auto mb-6">
      <p class="text-text-secondary text-sm leading-relaxed">{{ message }}</p>

      <!-- 错误代码 -->
      <div v-if="errorCode" class="mt-3 text-xs text-text-muted">{{ t('login.errorCode') }}: {{ errorCode }}</div>
    </div>

    <!-- 操作按钮 -->
    <div class="flex flex-col sm:flex-row gap-3 justify-center">
      <button
        v-if="showRetry"
        class="px-6 py-2.5 bg-primary text-primary-foreground rounded-md hover:bg-primary-hover transition-colors font-medium"
        @click="$emit('retry')">
        <svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        {{ retryText }}
      </button>

      <button
        v-if="showSecondaryAction"
        class="px-6 py-2.5 border border-border rounded-md text-text-secondary hover:bg-accent hover:text-accent-foreground transition-colors"
        @click="$emit('secondary-action')">
        {{ secondaryActionText }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

import { t } from '@/i18n';

type ErrorType = 'network' | 'server' | 'permission' | 'general';

interface Props {
  title?: string;
  message: string;
  errorType?: ErrorType;
  errorCode?: string;
  showRetry?: boolean;
  retryText?: string;
  showSecondaryAction?: boolean;
  secondaryActionText?: string;
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  errorType: 'general',
  showRetry: true,
  retryText: '',
  showSecondaryAction: false,
  secondaryActionText: ''
});

defineEmits<{
  retry: [];
  'secondary-action': [];
}>();

// 根据错误类型自动生成标题
const computedTitle = computed(() => {
  if (props.title) return props.title;

  switch (props.errorType) {
    case 'network':
      return t('login.networkError');
    case 'server':
      return t('login.serverError');
    case 'permission':
      return t('message.error.permission');
    default:
      return t('common.error');
  }
});
</script>
